import Taro, { } from '@/newTaro';
import { Component } from 'react';
import { View, Input, Map, ScrollView, Image } from '@tarojs/components';
import QQMapWX from '@/scriptPlugin/qqmap-wx-jssdk.min.js';
import imgUrl from '@/assets/location.png';
import noAva from '@/assets/noAva.png';
import BottomPopup from '@/components/feedback/bottomPopup';
import './index.scss';

class QQMap extends Component {
  constructor(props) {
    super(props);
    this.state = {
      qMapKey: 'IVXBZ-HR7R7-RK5XZ-PFQIP-4DHV2-6PFQN',
      QQMapSDK: {},
      latitude: 35.95234, // 初始纬度
      longitude: 120.239013, // 初始经度
      markers: [
        {
          // 标记点
          iconPath: imgUrl,
          id: 0,
          latitude: 35.95234, // 纬度
          longitude: 120.239013, // 经度
          width: 16, // 标注图标高度
          height: 16, // 标注图标宽度
        },
      ],

      searchVal: '',
      nearbyBuilding: [],
      popupShow: false,
      personnelList: [
        {
          avatar: '',
          identity: '管家',
          name: 'yc',
          tel: '17826809425'
        },
        {
          avatar: '',
          identity: '管家',
          name: 'yc',
          tel: '17826809425'
        }
      ]
    };
  }

  componentDidMount = () => {
    const { qMapKey } = this.state
    // 实例化API核心类
    const QQMapSDK = new QQMapWX({
      key: qMapKey,
      mapStyleId: 'styleMap', // 个性化地图
    });
    this.setState({
      QQMapSDK,
    });
    const that = this;
    Taro.getLocation({
      type: 'wgs84',
      success: function (res) {
        // that.getNearLocation(res)
        // 设置当前位置
        const obj = {
          // 标记点
          ...that.state.markers[0],
          latitude: res.latitude, // 纬度
          longitude: res.longitude, // 经度
        };
        that.setState({
          markers: [obj],
          latitude: res.latitude, // 纬度
          longitude: res.longitude, // 经度,
        });
      },
    });
  };

  // 地图搜索栏-----------------------------------------------
  /**
   * @desc marker 点击事件
   * @param { object } e
   */
  handleMarkerClick = (e) => {
    console.log(e);
    this.setState({
      popupShow: true
    });
  };

  /**
   * @desc 视野发生变化触发事件
   * @param { object } e
   */
  handleRegionChange = (e) => {
    console.log(e);
  };

  // 地图搜索栏-----------------------------------------------
  getNearLocation = (res) => {
    // 获取周边建筑信息
    const that = this;
    const { QQMapSDK, searchVal } = this.state
    QQMapSDK.search({
      keyword: searchVal,
      boundary: `nearBy(${res.latitude},${res.longitude},1000)`,
      success: (searchRes) => {
        that.setState({
          nearbyBuilding: searchRes.data,
        });
      },
      fail: function (searchRes) {
        console.log(searchRes);
      },
      // complete: function(searchRes) {
      //   console.log(searchRes);
      // },
    });
  }
  /**
   * @desc 搜索框事件
   * @param { object } e
   */
  handleSearchValChange = (e) => {
    const that = this;
    this.state.QQMapSDK.search({
      keyword: e.detail.value,
      success: function (searchRes) {
        that.setState({
          nearbyBuilding: searchRes.data,
        });
      },
      fail: function (searchRes) {
        console.log(searchRes);
      },
      // complete: function(searchRes) {
      //   console.log(searchRes);
      // },
    });
    this.setState({
      searchVal: e.detail.value,
    });
  };

  /**
   * @desc 列表项点击事件
   * @param { number } latitude 纬度
   * @param { number } longitude 经度
   */
  handleNearbyClick = (latitude, longitude) => {
    // 设置当前位置
    const obj = {
      // 标记点
      ...this.state.markers[0],
      latitude: latitude, // 纬度
      longitude: longitude, // 经度
    };
    this.setState({
      markers: [obj],
      latitude: latitude, // 纬度
      longitude: longitude, // 经度,
    });
  };
  // 底部弹窗-----------------------------------------------
  closePopup = () => {
    this.setState({
      popupShow: false
    });
  }
  render() {
    const { popupShow, personnelList } = this.state
    return (
      <View className="homeWrap">

        {/**
         * longitude 中心经度
         * latitude 中心纬度
         * scale 缩放级别，取值范围为5-18
         * onMarkertap marker 点击事件
         * onRegionchange 视野发生变化触发事件
         * show-location 显示带有方向的当前定位点
         * cover-view 覆盖在原生组件之上的文本视图
         */}
        <Map
          class="mapDom"
          subkey={this.state.qMapKey}
          longitude={this.state.longitude}
          latitude={this.state.latitude}
          scale="18"
          markers={this.state.markers}
          onMarkertap={this.handleMarkerClick.bind(this)}
          onRegionchange={this.handleRegionChange.bind(this)}
          showLocation
        />
        <BottomPopup isOpened={popupShow} title={'测试标题'} onClose={this.closePopup}>
          <View className='flexColumn'>
            {personnelList.map((item, index) => (
              <View
                key={index}
                className="personnelItem"
              >
                <View className={`item_Image_Wrap ${!item.avatar ? 'noAva' : ''}`}>
                  {item.avatar ? <Image src={item.avatar}></Image> : <Image src={noAva}></Image>}
                </View>
                <View className='item_text'>
                  {item.identity} {item.name} {item.tel}
                </View>
              </View>
            ))}
          </View>
        </BottomPopup>
        {/** 搜索栏 */}
        {/**
          <View className="searchDom">
            <Input
              value={this.state.searchVal}
              onInput={this.handleSearchValChange.bind(this)}
              className="inputDom"
            />
          </View>
        */}
        {/**
          <ScrollView className="scrollDom" scrollY scrollWithAnimation lowerThreshold="50">
            {this.state.nearbyBuilding.map((item) => (
              <View
                key={item.id}
                className="nearbyBuilding"
                onClick={this.handleNearbyClick.bind(this, item.location.lat, item.location.lng)}
              >
                <View className="nearbyTitle">{item.title}</View>
                <View className="nearbyAddr">{item.address}</View>
              </View>
            ))}
          </ScrollView>
         */}
      </View>
    );
  }
}

export default QQMap;
